<!-- 门店入驻 -->
<template>
	<view class="apply-commission-wrap page_boxs">
		<view class="goods_head">
			<view class="head_item" :class="isHead == 1?'active':''" @tap="isHeadClick(1)">
				<text>上架中</text>
				<text class="xian"></text>
			</view>
			<view class="head_item" :class="isHead == 2?'active':''" @tap="isHeadClick(2)">
				<text>仓库</text>
				<text class="xian"></text>
			</view>
		</view>
		<view class="goods_nav">
			<view class="goods_list" v-for="(item,index) in goodsList">
				<view class="goods_item">
					<image :src="item.image" mode="" class="goodimg"></image>
					<view class="goods_right">
						<text class="biaoti">{{item.title}}</text>
						<text class="kucun">库存：{{item.stock}}</text>
						<text class="price">¥{{item.price}}</text>
					</view>
				</view>
				<view class="goods_bot">
					<view class="bot_left" @click="delitem(item.id,index)">
						<image src="../../../static/images/tabbar/tabbar_category1.png" mode="" class="shanchu"></image>
						<text class="del">删除</text>
					</view>
					<view class="bot_right">
						<view class="shangjia" @click="shangjia(item.id,item.status,index)">
							{{item.status == 'up'?'下架':'上架'}}
						</view>
						<view class="bianji" @click="bainji(item.id)">
							编辑信息
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty :show="isEmpty" margin-top="160" mode="list"></u-empty>
		<u-loadmore v-if="goodsList.length" height="200rpx;padding-bottom:70px" :status="loadStatus" icon-type="flower" color="#ccc" />
		<view class="bot">
			<view class="botview" @tap="goodsRelease">
				发布商品
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			isHead:1,//1上架中 2仓库
			goodsList:[],
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
			isEmpty: false,
			status:'up',//status =up 则是上架  status= down库存
		};
	},
	computed: {
	},
	onLoad() {
		this.getList();//获取列表
	},
	// 触底加载更多
	onReachBottom() {
		console.log("+++____")
		if (this.currentPage < this.lastPage) {
			this.currentPage += 1;
			this.getList();
		}
	},
	methods: {
		getList() { //加载列表
			let that = this;
			that.loadStatus = 'loading';
			that.$http(
				'home.getList',
				{
					page: that.currentPage,
					status:that.status,
					store_id: uni.getStorageSync('storeId')
				},
				'加载中...'
			).then(res => {
				uni.stopPullDownRefresh();
				if (res.code == 1) {
					that.goodsList = [...that.goodsList, ...res.data.list];
					that.isEmpty = !that.goodsList.length;
					// that.orderInfo = res.data;
					that.lastPage = res.data.lastpage;
					that.loadStatus = that.currentPage < res.data.lastpage ? 'loadmore' : 'nomore';
				}
			});
		},
		isHeadClick(e){
			if(e == 1){
				//上架
				this.status = 'up'
			}else if(e == 2){
				//库存
				this.status = 'down'
			}
			this.isHead = e
			this.currentPage = 1;
			this.lastPage = 1;
			this.goodsList = []
			this.getList();
		},
		goodsRelease(){//发布商品
			this.$Router.push({
				path: '/pages/app/merchant/goodsRelease'
			});
		},
		delitem(id,index){
			let that = this;
			uni.showModal({
				title: '删除提示',
				confirmColor: '#f0c785',
				content: `是否确认删除此商品?`,
				success: res => {
					if (res.confirm) {
						that.$http(
							'home.delGoods',
							{
								id: id,
								store_id: uni.getStorageSync('storeId')
							}
						).then(res => {
							if (res.code == 1) {
								this.$u.toast(res.msg);
								this.goodsList.splice(index, 1);
							}
						});
					}
					
					
				}
			});
		},
		shangjia(id,status,index){
			//上下架
			let that = this;
			that.$http(
				'home.editGoodsStatus',
				{
					id: id,
					status:status,
					store_id: uni.getStorageSync('storeId')
				}
			).then(res => {
				if (res.code == 1) {
					this.$u.toast(res.msg);
					that.goodsList[index].status = that.goodsList[index].status=='up'?'down':'up'
				}
			});
		},
		bainji(id){
			//编辑
		}
	}
};
</script>

<style lang="scss">
.page_boxs{
	background-color: #f8f8f8;
	position: relative;
}
.goods_head{
	display: flex;
	flex-direction: row;
	padding: 10px 20px;
	align-items: center;
	background-color: #f8f8f8;
	position: fixed;
	height: 50px;
	width: 100%;
	z-index: 100;
	.head_item{
		margin-right: 15px;
		color: #333;
		font-size: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.xian{
		width: 60%;
		height: 3px;
		margin-top: 3px;
		border-radius: 10px;
		display: none;
		background-color: rgba(251,0,80,1);
	}
	.active{
		font-weight: bold;
		font-size: 18px;
	}
	.active .xian{
		display: inline-block;
	}
}
.goods_nav{
	display: flex;
	flex-direction: column;
	padding-top: 50px;
	padding-bottom: 70px;
	.goods_list{
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 10px;
		margin: 0 10px 10px 10px;
		padding: 8px;
		.goods_item{
			display: flex;
			flex-direction: row;
			
			.goodimg{
				width: 85px;
				height: 85px;
			}
			.goods_right{
				display: flex;
				flex-direction: column;
				width: 75%;
				padding: 5px 5px 5px 8px;
				.biaoti{
					color: #333;
					font-size: 12px;
					font-weight: bold;
					line-height: 16px;
					width: 100%;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2; /* 这里是超出几行省略 */
					overflow: hidden;
				}
				.kucun{
					color: #666;
					font-size: 10px;
					font-weight: 400;
				}
				.price{
					font-weight: bold;
					color: rgba(251,0,67,1);
					margin-top: auto;
					font-size: 13px;
				}
			}
		}
	}
	.goods_bot{
		display: flex;
		flex-direction: row;
		border-top: 1rpx solid #eee;
		padding-top: 5px;
		margin-top: 5px;
		.bot_left{
			display: flex;
			align-items: center;
			.shanchu{
				width: 13px;
				height: 13px;
				margin-right: 5px;
			}
			.del{
				color: #666;
				font-size: 10px;
				
			}
		}
		.bot_right{
			display: flex;
			margin-left: auto;
			align-items: center;
			.shangjia{
				padding: 2px 15px;
				border: 1px solid rgba(251,0,72,1);
				border-radius: 25px;
				height: 25px;
				margin-right: 15px;
				color: rgba(251,0,72,1);
				font-size: 10px;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 80px;
			}
			.bianji{
				background-color: rgba(251,0,62,1);
				padding: 2px 15px;
				height: 25px;
				border-radius: 25px;
				color: #fff;
				font-size: 10px;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 80px;
			}
		}
	}
}
.bot{
	width: 100%;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	height: 50px;
	padding: 5px 15px;
	display: flex;
	align-items: center;
	z-index: 100;
	.botview{
		background-color: rgba(252,0,90,1);
		width: 100%;
		height: 40px;
		color: #fff;
		font-size: 14px;
		border-radius: 25px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.u-load-more-wrap{
	padding-bottom: 70px;
}
</style>
